// 效果不好 已经弃用了

import { ref, Ref, onMounted, onUnmounted } from "vue";

// 传入的是ref类型的元素，通过.value的方式才能够获取到dom节点
// 大写的Ref 代表的是类型
function useClickOutside(elementRef: Ref<null | HTMLElement>) {
  const isClickOutside = ref(false);
  const handler = (e: MouseEvent) => {
    if (elementRef.value) {
      if (!elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = true;
      } else {
        isClickOutside.value = false;
      }
    }
  };
  // 事件监听器需要在mounted的时候添加，在unmounted的时候删除
  onMounted(() => {
    document.addEventListener("click", handler);
  });
  onUnmounted(() => {
    document.removeEventListener("click", handler);
  });
  return isClickOutside;
}

export default useClickOutside;
